doctype html
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')
    link(rel='stylesheet' href='/stylesheets/mycss.css')
    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')
    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js')
    script(src='/js/site_manage.js')
    script#table-template(type="text/x-handlebars-template").
      {{#each sites}}
        <tr class="success">
          <td>{{id}}</td>
          <td>{{name}}</td>
          <td>{{type}}</td>
          <td>{{address}}</td>
          <td>{{code}}</td>
          <td>{{created_at}}</td>
          <td>{{updated_at}}</td>
          <td><button class="btn btn-primary btn-xs btn-block btn-upd" type="button" data-toggle="modal" data-target="#update" data-result='{"id":{{id}},"name":"{{name}}","type":"{{type}}","address":"{{address}}","code":"{{code}}"}'>修改</button></td>
          <td><button class="btn btn-danger btn-xs btn-block btn-del" type="button" data-toggle="modal" data-target="#delete" data-id={{id}}>删除</button></td>
        </tr>
      {{/each}}
  body
    div.container
      //提示栏
      div.row.hidden
        div#banner-danger.alert.alert-danger.alert-dismissable 
          span 将返回信息显示在这里
          button.close(type="type" data-dismiss="alert" aria-hidden="true") &times;
      div.row.hidden
        div#banner-search.alert.alert-info.alert-dismissable 
          span 搜索结果如下：
          a(href="/site_manage" style="float:right") 返回搜索前的原始结果
      //标题和搜索框
      div.row
        ul.list-inline
          li.col-lg-3.nonpadding
            p.content-title=title
          li.col-lg-6.nonpadding
          li.float-right.col-lg-3.nonpadding
            div.input-group
              span.input-group-btn
                button.btn.btn-warning(type='button',data-toggle="modal",data-target="#add") 添加新机构
              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)
              span.input-group-btn
                button.btn.btn-warning.btn-search(type='button') 搜索
      //表格      
      div.row
        table.table
          thead
            tr
              th 序号
              th 机构名称
              th 机构类型
              th 机构地址
              th 机构代码
              th 创建日期
              th 修改日期
              th 修改
              th 删除
          tbody
            each result in results.results
              tr
              each val in result
                td.success #{val}
              td.success 
                - var info = result
                button(type='button' class='btn btn-primary btn-xs btn-block btn-upd' data-result=info data-toggle="modal",data-target="#update") 修改
              td.success 
                - var id = result.id
                button(type='button' class='btn btn-danger btn-xs btn-block btn-del' data-id=id data-toggle="modal",data-target="#delete") 删除
      //分页
      div.row(style="text-align:center;")
        ul.pagination#pagination(style="margin:0 auto;")
          li.page(page="first")
            a &laquo;
          - for (var i = 1; i < results.page_num+1; i++)
            li.page(page=i): a #{i}
          li.page(page="last" page_max=results.page_num)
            a &raquo;
      //显示返回信息的模态框
      div.modal.fade#infoReturn(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 返回信息
            div.modal-body#infoBody 返回的提示信息
            div.modal-footer
              button.btn.btn-primary#btn-confirm(type='submit') 确认
      //修改机构信息的模态框
      div.modal.fade#update(tabindex='-1',role='dialog',aria-labelledby='updLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 修改机构信息
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 机构名称
                  div.col-sm-7
                    input.form-control#name_upd(type='text',placeholder='请输入机构名称(必填)',value='')
                  div.col-sm-3
                    p#warning5(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构类型
                  div.col-sm-7
                    select.form-control#type_upd
                      option(value='医疗机构') 医疗机构
                      option(value='CRO') CRO
                      option(value='企业') 企业
                      option(value='监管部门') 监管部门
                  div.col-sm-3
                    p#warning6(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构地址
                  div.col-sm-7
                    input.form-control#address_upd(type='text' placeholder='请输入机构地址(必填)',value='')
                  div.col-sm-3
                    p#warning7(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构代码
                  div.col-sm-7
                    input.form-control#code_upd(type='text' placeholder='请输入机构代码(必填)',value='')
                  div.col-sm-3
                    p#warning8(style='color:#ff0000')
            div#id_upd(style="display:none") 存储待修改项的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-update(type='submit') 确认修改
            span#tips2
      //删除机构的模态框
      div.modal.fade#delete(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 删除机构
            div.modal-body#del_confirm 确认删除？
            div#del_id(style="display:none") 存储待删除的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-danger.btn-delete(type='submit') 确认删除
            span#tips1
      //添加机构的模态框
      div.modal.fade#add(tabindex='-1',role='dialog',aria-labelledby='addLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 添加新机构
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 机构名称
                  div.col-sm-7
                    input.form-control#name(type='text',placeholder='请输入机构名称(必填)',value='')
                  div.col-sm-3
                    p#warning1(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构类型
                  div.col-sm-7
                    select.form-control#type
                      option(value='医疗机构') 医疗机构
                      option(value='CRO') CRO
                      option(value='企业') 企业
                      option(value='监管部门') 监管部门
                  div.col-sm-3
                    p#warning2(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构地址
                  div.col-sm-7
                    input.form-control#address(type='text' placeholder='请输入机构地址(必填)',value='')
                  div.col-sm-3
                    p#warning3(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构代码
                  div.col-sm-7
                    input.form-control#code(type='text' placeholder='请输入机构代码(必填)',value='')
                  iv.col-sm-3
                    p#warning4(style='color:#ff0000')
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-add(type='submit') 确认添加
            span#tips